import { useEffect, useState, useReducer, useContext } from "react";

import { IconMobile, IconDesktop } from "@arco-design/web-react/icon";
import { Radio } from "@arco-design/web-react";

import {
    pageContext,
    pageContextReducer,
    pageContextStore,
    templateContextStore,
    templateContext,
    templateContextReducer
} from "@/store/templateContext";

import { getGlobalValue } from "@/tool/settingConfigFilter";

import Left from "./left";
import Right from "./right";

const RadioGroup = Radio.Group;
export default function () {
    const [pattern, setPattern] = useState("desktop");
    const [state, dispatch] = useReducer(templateContextReducer, templateContextStore);
    const [pageState, pageDispatch] = useReducer(pageContextReducer, pageContextStore);
    // function handlePreview(data, template) {
    //     const previewData = { origin: "moi", template: template, type: "image" };
    //     Object.assign(previewData, data);
    //     previewData.default["type"] = data.id;
    //     previewData.default["block_id"] = new Date().getTime();
    //     previewData["theme_config"] = {
    //         global: getGlobalValue(state.global)
    //     };
    //     document.getElementById("moi-preview").contentWindow.postMessage(previewData, "*");
    // }

    return (
        <pageContext.Provider value={{ state: pageState, dispatch: pageDispatch }}>
            <templateContext.Provider value={{ state, dispatch }}>
                <div className="w-screen flex h-screen  overflow-hidden">
                    <div className="w-[260px] ">
                        <Left></Left>
                    </div>
                    <div className="flex-1 bg-gray-100 p-6">
                        <div className="flex h-full flex-col">
                            <div className="flex justify-center">
                                <RadioGroup type="button" name="lang" value={pattern} onChange={(value) => setPattern(value)}>
                                    <Radio value="desktop">
                                        <IconDesktop />
                                    </Radio>
                                    <Radio value="mobile">
                                        <IconMobile />
                                    </Radio>
                                </RadioGroup>
                            </div>
                            <div className="flex-1 flex justify-center">
                                <div
                                    className="bg-white  h-full flex-shrink-0 overflow-hidden"
                                    style={{ width: pattern === "desktop" ? "100%" : "414px" }}>
                                    <iframe src="/preview/index.html" id="moi-preview" className="w-full h-full"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="w-[260px] ">
                        <Right></Right>
                    </div>
                </div>
            </templateContext.Provider>
        </pageContext.Provider>
    );
}
